<template>
  <div class="operate">
    <!-- 各版块营收达成率 -->
    <div class="reach">
      <item-title>
        <span slot="txt" class="txt">各版块营收达成率</span>
      </item-title>
      <view-item>
        <div slot="itemData" class="itemData">
          <bar-chart v-model="eachCompanyArr" :option="eachCompanyOption"></bar-chart>
        </div>
      </view-item>
    </div>
    <!-- 地产 -->
    <div class="plate">
      <main-title>
        <span slot="txt" class="txt">地产</span>
      </main-title>
      <!-- 当月完成 / 当月计划 -->
      <view-item class="complete_plan">
        <div slot="itemData" class="itemData">
          <div class="complete">
            <p class="title">当月完成</p>
            <div class="num">
              <p class="boldFont inline-flex-ib">
                95,763
                <span>.77</span>
                <i class="units">万元</i>
              </p>
              <p class="boldFont inline-flex-ib">
                同比上月9
                <span>.32%</span>
                <i class="rise"></i>
              </p>
            </div>
          </div>
          <div class="plan">
            <div class="left">
              <p class="title">当月计划</p>
              <p class="num boldFont inline-flex-ib">
                943
                <span>.21 万元</span>
              </p>
            </div>
            <div class="right">
              <p class="boldFont">
                达成率
                <span>107</span>%
              </p>
            </div>
          </div>
        </div>
      </view-item>
      <!-- 业务占比 -->
      <div class="share">
        <item-title>
          <span slot="txt" class="txt">业务占比</span>
        </item-title>
        <view-item>
          <div slot="itemData" class="itemData">
            <div class="left">
              <div class="chartTips">单位:万元</div>
              <pie-chart v-model="shareArr" :option="shareOption"></pie-chart>
            </div>
            <em></em>
            <div class="right">
              <p class="title">点击左边各项
                <br>以显示明细
              </p>
            </div>
          </div>
        </view-item>
      </div>
    </div>
    <!-- 产业园 -->
    <div class="plate">
      <main-title>
        <span slot="txt" class="txt">产业园</span>
      </main-title>
      <!-- 当月完成 / 当月计划 -->
      <view-item class="complete_plan">
        <div slot="itemData" class="itemData">
          <div class="complete">
            <p class="title">当月完成</p>
            <div class="num">
              <p class="boldFont inline-flex-ib">
                95,763
                <span>.77</span>
                <i class="units">万元</i>
              </p>
              <p class="boldFont">
                同比上月9
                <span>.32%</span>
                <i class="rise"></i>
              </p>
            </div>
          </div>
          <div class="plan">
            <div class="left">
              <p class="title">当月计划</p>
              <p class="num boldFont inline-flex-ib">
                943
                <span>.21 万元</span>
              </p>
            </div>
            <div class="right">
              <p class="boldFont">
                达成率
                <span>93</span>%
              </p>
            </div>
          </div>
        </div>
      </view-item>
      <!-- 业务占比 -->
      <div class="share">
        <item-title>
          <span slot="txt" class="txt">业务占比</span>
        </item-title>
        <view-item>
          <div slot="itemData" class="itemData">
            <div class="left">
              <div class="chartTips">单位:万元</div>
              <pie-chart v-model="shareArr" :option="shareOption"></pie-chart>
            </div>
            <em></em>
            <div class="right">
              <p class="title">点击左边各项
                <br>以显示明细
              </p>
            </div>
          </div>
        </view-item>
      </div>
    </div>
    <!-- 钢圈 -->
    <div class="plate">
      <main-title>
        <span slot="txt" class="txt">钢圈</span>
      </main-title>
      <!-- 当月完成 / 当月计划 -->
      <view-item class="complete_plan">
        <div slot="itemData" class="itemData">
          <div class="complete">
            <p class="title">当月完成</p>
            <div class="num">
              <p class="boldFont inline-flex-ib">
                95,763
                <span>.77</span>
                <i class="units">万元</i>
              </p>
              <p class="boldFont">
                同比上月9
                <span>.32%</span>
                <i class="rise"></i>
              </p>
            </div>
          </div>
          <div class="plan">
            <div class="left">
              <p class="title">当月计划</p>
              <p class="num boldFont inline-flex-ib">
                943
                <span>.21 万元</span>
              </p>
            </div>
            <div class="right">
              <p class="boldFont">
                达成率
                <span>2</span>%
              </p>
            </div>
          </div>
        </div>
      </view-item>
      <!-- 业务占比 -->
      <div class="share">
        <item-title>
          <span slot="txt" class="txt">业务占比</span>
        </item-title>
        <view-item>
          <div slot="itemData" class="itemData">
            <div class="left">
              <div class="chartTips">单位:万元</div>
              <pie-chart v-model="shareArr" :option="shareOption"></pie-chart>
            </div>
            <em></em>
            <div class="right">
              <p class="title">点击左边各项
                <br>以显示明细
              </p>
            </div>
          </div>
        </view-item>
      </div>
    </div>
    <!-- 房联行 -->
    <div class="plate">
      <main-title>
        <span slot="txt" class="txt">房联行</span>
      </main-title>
      <!-- 当月完成 / 当月计划 -->
      <view-item class="complete_plan">
        <div slot="itemData" class="itemData">
          <div class="complete">
            <p class="title">当月完成</p>
            <div class="num">
              <p class="boldFont inline-flex-ib">
                95,763
                <span>.77</span>
                <i class="units">万元</i>
              </p>
              <p class="boldFont">
                同比上月9
                <span>.32%</span>
                <i class="rise"></i>
              </p>
            </div>
          </div>
          <div class="plan">
            <div class="left">
              <p class="title">当月计划</p>
              <p class="num boldFont inline-flex-ib">
                943
                <span>.21 万元</span>
              </p>
            </div>
            <div class="right">
              <p class="boldFont">
                达成率
                <span>2</span>%
              </p>
            </div>
          </div>
        </div>
      </view-item>
    </div>
    <!-- 金控 -->
    <div class="plate">
      <main-title>
        <span slot="txt" class="txt">金控</span>
      </main-title>
      <!-- 当月完成 / 当月计划 -->
      <view-item class="complete_plan">
        <div slot="itemData" class="itemData">
          <div class="complete">
            <p class="title">当月完成</p>
            <div class="num">
              <p class="boldFont inline-flex-ib">
                95,763
                <span>.77</span>
                <i class="units">万元</i>
              </p>
              <p class="boldFont">
                同比上月9
                <span>.32%</span>
                <i class="rise"></i>
              </p>
            </div>
          </div>
          <div class="plan">
            <div class="left">
              <p class="title">当月计划</p>
              <p class="num boldFont inline-flex-ib">
                943
                <span>.21 万元</span>
              </p>
            </div>
            <div class="right">
              <p class="boldFont">
                达成率
                <span>2</span>%
              </p>
            </div>
          </div>
        </div>
      </view-item>
    </div>
    <!-- 融媒 -->
    <div class="plate">
      <main-title>
        <span slot="txt" class="txt">融媒</span>
      </main-title>
      <!-- 当月完成 / 当月计划 -->
      <view-item class="complete_plan">
        <div slot="itemData" class="itemData">
          <div class="complete">
            <p class="title">当月完成</p>
            <div class="num">
              <p class="boldFont inline-flex-ib">
                95,763
                <span>.77</span>
                <i class="units">万元</i>
              </p>
              <p class="boldFont">
                同比上月9
                <span>.32%</span>
                <i class="rise"></i>
              </p>
            </div>
          </div>
          <div class="plan">
            <div class="left">
              <p class="title">当月计划</p>
              <p class="num boldFont inline-flex-ib">
                943
                <span>.21 万元</span>
              </p>
            </div>
            <div class="right">
              <p class="boldFont">
                达成率
                <span>2</span>%
              </p>
            </div>
          </div>
        </div>
      </view-item>
    </div>
  </div>
</template>

<script>
import pieChart from "@/components/Chart/pieChart";
import barChart from "@/components/Chart/barChart";
import viewItem from "@/components/bossVersion/viewItem";
import itemTitle from "@/components/bossVersion/itemTitle";
import mainTitle from "@/components/bossVersion/mainTitle";

export default {
  components: {
    pieChart,
    barChart,
    viewItem,
    itemTitle,
    mainTitle
  },
  data() {
    return {
      shareArr: [], // 业务占比
      shareOption: {
        color: ["#48e5ff", "#f0bd26", "#28e787", "#ff3e9a", "#FF7145"],
        radius: ["40%", "60%"],
        center: ["50%", "60%"],
        // roseType: "radius",
        startAngle: 250,
        formatter: function(value) {
          return "{value|" + value.name + "}";
        },
        hidePieMargin: true,
        showLine: true,
        showLabel: true,
        legend: {
          show: false
        }
      },
      eachCompanyArr: [], // 各版块营收达成率
      eachCompanyOption: {
        startColor: "#48e5ff",
        endColor: "#48e5ff",
        exchange: true,
        grid: {
          height: "100%",
          top: 0,
          left: "14%"
        },
        xAxis: {
          show: false
        },
        textStyle: {
          color: "#48e5ff",
          fontFamily: "DIN Condensed Bold",
          fontSize: 12
        },
        label: {
          show: true,
          formatter: "{c}%"
        }
      }
    };
  },
  mounted() {
    this.setChart();
  },
  methods: {
    setChart() {
      var newList2 = [
        { name: "地产", value: 85, percent: "" },
        { name: "产业园", value: 70, percent: "" },
        { name: "钢圈", value: 30, percent: "" },
        { name: "房联行", value: 97, percent: "" },
        { name: "金控", value: 46, percent: "" },
        { name: "融媒", value: 71, percent: "" }
      ];
      this.$set(this, "eachCompanyArr", newList2);
      var newList4 = [
        { name: "商业", value: 9, percent: "10.47" },
        { name: "鑫置地", value: 14, percent: "16.28" },
        { name: "物业", value: 8, percent: "9.30" },
        { name: "景观", value: 33, percent: "38.37" }
      ];
      this.$set(this, "shareArr", newList4);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/bossVersion/_basics";

.operate {
  line-height: 1;
  .item {
    height: 2.4rem;
  }
  .complete_plan {
    height: 1.35rem;
    & > .itemData {
      @include flexFdcYjsa;
    }
    .complete {
      color: $color3;
      & > .title {
        margin-bottom: 0.03rem;
        @include bold(0.14rem);
      }
      & > .num {
        @include flexYbase;
        & p:nth-of-type(1) {
          font-size: 0.34rem;
          & > span {
            font-size: 0.15rem;
          }
          & > .units {
            margin-left: 0.03rem;
            font-size: 0.12rem;
          }
        }
        & p:nth-of-type(2) {
          @include flexYbase;
          margin-left: 0.1rem;
          font-size: 0.14rem;
          & > span {
            font-size: 0.12rem;
          }
        }
      }
    }
    .plan {
      @include flexXjsbYend;
      color: $budget;
      .left {
        & > .title {
          margin-bottom: 0.03rem;
          @include bold(0.12rem);
        }
        & > .num {
          font-size: 0.2rem;
          & > span {
            font-size: 0.12rem;
          }
        }
      }
      .right {
        color: $color1;
        & > p {
          font-size: 0.12rem;
          & > span {
            font-size: 0.15rem;
          }
        }
      }
    }
  }
  .share {
    & > .item {
      height: 1.65rem;
      & > .itemData {
        @include flexYcen;
        height: 100%;
        & > .left {
          flex: 1;
          height: 100%;
        }
        & > em {
          width: 1px;
          height: 1.25rem;
          background-color: $color9;
        }
        & > .right {
          width: 1.07rem;
          color: $color1;
          line-height: 1.5;
          text-align: center;
          & > p {
            font-size: 0.12rem;
          }
        }
      }
    }
  }
  .chartTips {
    position: absolute;
  }
}
</style>
